
//部门结构树
var dept_ztree;
var dept_setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "deptId",
            pIdKey: "parentId",
            rootPId: -1
        },
        key: {
            url:"nourl"
        }
    }
};

var vm = new Vue({
    el:'#rrapp',
    data () {
        return {
            chartLine: null,
            chartBar: null,
            chartPie: null,
            chartScatter: null,
        }
    },
    mounted () {
        this.initChartLine()
      /*  this.initChartBar()
        this.initChartPie()*/

    },
    activated () {
        // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
        if (this.chartLine) {
            this.chartLine.resize()
        }
        if (this.chartBar) {
            this.chartBar.resize()
        }
        if (this.chartPie) {
            this.chartPie.resize()
        }
    },
    methods: {
        // 折线图
        initChartLine () {
            var option = {
                'title': {
                    'text': '人员变动折线图'
                },
                'tooltip': {
                    'trigger': 'axis'
                },
                'legend': {
                    'data': [ '人员新进', '职名变动', '部门变动', '人员减少', '在岗变动','不在岗变动' ]
                },
                'grid': {
                    'left': '3%',
                    'right': '4%',
                    'bottom': '3%',
                    'containLabel': true
                },
                'toolbox': {
                    'feature': {
                        'saveAsImage': { }
                    }
                },
                'xAxis': {
                    'type': 'category',
                    'boundaryGap': false,
                    'data':[]
                },
                'yAxis': {
                    'type': 'value'
                },
                'series': [
                    {
                        'name': '人员新进',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '职名变动',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '部门变动',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '人员减少',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '在岗变动',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '不在岗变动',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    }
                ]
            }
            this.chartLine = echarts.init(document.getElementById('chartLineBox'))
            var months=[];
            var addEmpStatistics=[];
            var changeDeptStatistics=[];
            var changeOfficeStatistics=[];
            var changeExistStatusStatistics=[];
            var changeNotStatusStatistics=[];
            var removeEmpStatistics=[];
            /*$.get异步请求*/
            $.get(baseURL + "fun/emp/addEmpStatistics", function(r){
                var addEmpListByMonth=r.addEmpListByMonth;
                var len=addEmpListByMonth.length;
                for (var i=0;i<len;i++) {
                    months.push(addEmpListByMonth[i].month);
                    addEmpStatistics.push(addEmpListByMonth[i].num);
                }
            });

            $.get(baseURL + "fun/emp/changeDeptStatistics", function(r){
                var changeDeptListByMonth=r.changeDeptListByMonth;
                var len=changeDeptListByMonth.length;
                for (var i=0;i<len;i++) {
                    changeDeptStatistics.push(changeDeptListByMonth[i].num);
                }
            });

            $.get(baseURL + "fun/emp/changeOfficeStatistics", function(r){
                var changeOfficeListByMonth=r.changeOfficeListByMonth;
                var len=changeOfficeListByMonth.length;
                for (var i=0;i<len;i++) {
                    changeOfficeStatistics.push(changeOfficeListByMonth[i].num);
                }
            });
            $.get(baseURL + "fun/emp/removeEmpStatistics", function(r){
                var removeEmpListByMonth=r.removeEmpListByMonth;
                var len=removeEmpListByMonth.length;
                for (var i=0;i<len;i++) {
                    removeEmpStatistics.push(removeEmpListByMonth[i].num);
                }
            });
            $.get(baseURL + "fun/emp/changeExistStatusStatistics", function(r){
                var changeExistStatusListByMonth=r.changeExistStatusListByMonth;
                var len=changeExistStatusListByMonth.length;
                for (var i=0;i<len;i++) {
                    changeExistStatusStatistics.push(changeExistStatusListByMonth[i].num);
                }
            });
            $.get(baseURL + "fun/emp/changeNotStatusStatistics", function(r){
                var changeNotStatusListByMonth=r.changeNotStatusListByMonth;
                var len=changeNotStatusListByMonth.length;
                for (var i=0;i<len;i++) {
                    changeNotStatusStatistics.push(changeNotStatusListByMonth[i].num);
                }
            });
            option.xAxis.data =months;
            option.series[0].data = addEmpStatistics;
            option.series[1].data = changeOfficeStatistics;
            option.series[2].data = changeDeptStatistics;
            option.series[3].data = removeEmpStatistics;
            option.series[4].data = changeExistStatusStatistics;
            option.series[5].data = changeNotStatusStatistics;
            this.chartLine.setOption(option);
            //如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
            setTimeout(()=>{
                this.chartLine.setOption(option);
            },1000);
            window.addEventListener('resize', () => {
                this.chartLine.resize()
            })
        },
        // 柱状图
        initChartBar () {
            var option = {
                'title': {
                    'text': ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '邮件营销',
                        type: 'bar',
                        stack: '广告',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'bar',
                        stack: '广告',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'bar',
                        stack: '广告',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '搜索引擎',
                        type: 'bar',
                        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                        markLine: {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            },
                            data: [
                                [{ type: 'min' }, { type: 'max' }]
                            ]
                        }
                    },
                    {
                        name: '百度',
                        type: 'bar',
                        barWidth: 5,
                        stack: '搜索引擎',
                        data: [620, 732, 701, 734, 1090, 1130, 1120]
                    },
                    {
                        name: '谷歌',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [120, 132, 101, 134, 290, 230, 220]
                    },
                    {
                        name: '必应',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [60, 72, 71, 74, 190, 130, 110]
                    },
                    {
                        name: '其他',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [62, 82, 91, 84, 109, 110, 120]
                    }
                ]
            }
            this.chartBar = echarts.init(document.getElementById('chartBarBox'))
            this.chartBar.setOption(option)
            window.addEventListener('resize', () => {
                this.chartBar.resize()
            })
        },
        // 饼状图
        initChartPie () {
            var option = {
                backgroundColor: '#2c343c',
                title: {
                    text: 'Customized Pie',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 274, name: '联盟广告' },
                            { value: 235, name: '视频广告' },
                            { value: 400, name: '搜索引擎' }
                        ].sort(function (a, b) { return a.value - b.value }),
                        roseType: 'radius',
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200
                        }
                    }
                ]
            }
            this.chartPie = echarts.init(document.getElementById('chartPieBox'))
            this.chartPie.setOption(option)
            window.addEventListener('resize', () => {
                this.chartPie.resize()
            })
        },

    }
});
window.addEventListener("message",function(event){
    vm.showList = true;
    var page = $("#jqGrid").jqGrid('getGridParam','page');
    $("#jqGrid").jqGrid('setGridParam',{
        postData:{'deptId':event.data,'name': ''},
        page:page
    }).trigger("reloadGrid");
}, false);